<template>
  <div>
    <span v-show="drag" class="ml-1 drag">
      <svg-icon :icon-class="'drag'"/>
    </span>
    <!-- 字段标识 -->
    <span class="ml-1">
      <!-- 真实字段 -->
      <a-tag v-if="!data.is_virtual">{{ data.slug }}</a-tag>
      <!-- 虚拟字段 -->
      <a-tooltip
        v-if="data.is_virtual"
        placement="topLeft"
      >
        <span slot="title">虚拟字段</span>
        <a-tag color="green" >{{ data.slug }}</a-tag>
      </a-tooltip>
    </span>

    <!-- 字段描述 -->
    <!-- 有字段描述 -->
    <span v-if="data.desc" class="ml-1">
      <a-tooltip
        v-if="data.desc"
        placement="topLeft"
        :title="`${data.desc}`"
      >
        <a-tag v-if="data.alias" color="green" >{{ data.alias }}</a-tag>
        <a-tag v-else color="green" >{{ data.name }}</a-tag>
      </a-tooltip>
    </span>
    <!-- 无字段描述 -->
    <span v-else class="ml-1">
      <a-tag v-if="data.alias">{{ data.alias }}</a-tag>
      <a-tag v-else>{{ data.name }}</a-tag>
    </span>

    <!-- 非虚拟字段 -->
    <template v-if="!data.is_virtual">
      <!-- 单选多选 -->
      <span v-if="(data.type==this.CONFIG_TYPES.MULTIPLE || data.type==this.CONFIG_TYPES.SINGLE) && data.options" class="ml-1">
        <a-tooltip
          v-if="data.options"
          placement="topLeft"
        >
          <span v-if="data.type==this.CONFIG_TYPES.SINGLE"  slot="title">
            选项来源：
              <template v-if="data.options.sample == '1'">
                手动输入
              </template>
              <template v-else-if="data.options.sample == '2'">
                从数据库导入
              </template>
              <template v-else-if="data.options.sample == '3'">
                从配置项导入
              </template>
              <template v-else-if="data.options.sample == '4'">
                JSON导入
              </template>
              <br/>
            选项设置：{{ data.options.options }}<br/>
            选择形式：
              <template v-if="data.options.type == 'single_select'">
                单选下拉
              </template>
              <template v-else-if="data.options.type == 'single_box'">
                单选框
              </template>
          </span>
          <span v-else-if="data.type==this.CONFIG_TYPES.MULTIPLE" slot="title">
            选项来源：
              <template v-if="data.options.sample == '1'">
                手动输入
              </template>
              <template v-else-if="data.options.sample == '2'">
                从数据库导入
              </template>
              <template v-else-if="data.options.sample == '3'">
                从配置项导入
              </template>
              <template v-else-if="data.options.sample == '4'">
                JSON导入
              </template>
              <br/>
            选项设置：{{ data.options.options }}<br/>
            选择形式：
              <template v-if="data.options.type == 'multiple_select'">
                多选下拉
              </template>
              <template v-else-if="data.options.type == 'multiple_box'">
                多选框
              </template>
              <template v-else-if="data.options.type == 'transfer'">
                穿梭框
              </template>
          </span>
          <a-tag color="blue" >{{ data.type }}</a-tag>
        </a-tooltip>
      </span>

      <!-- 树状下拉选择、级联选择 -->
      <span v-else-if="(data.type==this.CONFIG_TYPES.CASCADER || data.type==this.CONFIG_TYPES.SELECT_TREE) && data.options" class="ml-1">
        <a-tooltip
          v-if="data.options"
          placement="topLeft"
        >
          <span slot="title">
            选项来源：
              <template v-if="data.options.sample == '1'">
                手动输入
              </template>
              <template v-else-if="data.options.sample == '2'">
                从数据库导入
              </template>
              <template v-else-if="data.options.sample == '3'">
                从配置项导入
              </template>
              <template v-else-if="data.options.sample == '4'">
                JSON导入
              </template>
              <br/>
            选项设置：{{ data.options.options }}
          </span>
          <a-tag color="blue" >{{ data.type }}</a-tag>
        </a-tooltip>
      </span>

      <!-- 文件上传 -->
      <span v-else-if="data.type==this.CONFIG_TYPES.FILE && data.options" class="ml-1">
        <a-tooltip
          v-if="data.options"
          placement="topLeft"
        >
          <span slot="title">
            最大上传数：{{data.options.max}}<br/>
            文件类型：{{data.options.ext ? data.options.ext : '不限'}}
          </span>
          <a-tag color="blue" >{{ data.type }}</a-tag>
        </a-tooltip>
      </span>
      <span v-else class="ml-1">
        <a-tag>{{ data.type }}</a-tag>
      </span>
    </template>
    
    <!-- 默认值 -->
    <span v-if="data.value" class="ml-1">
      <a-tooltip
        placement="topLeft"
      >
        <!-- 文件上传 -->
        <span v-if="data.type==this.CONFIG_TYPES.FILE" slot="title">
          <span v-for="(item, index) of arrayWrap(data.value)" :key="item">
            文件ID：{{item.id}}<br/>
            文件名称：{{item.origin_filename}}<br/>
            文件地址：{{item.path}}
            <hr v-if="index < data.value.length-1"/>
          </span>
        </span>
        <!-- 多选 -->
        <span v-else-if="data.type==this.CONFIG_TYPES.MULTIPLE" slot="title">
          <span v-for="(item, index) of data.value" :key="item">
            <template v-if="index > 0">
              <a-divider v-if="index < data.value.length+1" type="vertical" />
            </template>
            {{ item }}
          </span>
        </span>
        <!-- 文本 -->
        <span v-else slot="title">
          {{data.value}}
        </span>
        <a-tag color="purple" >默认值</a-tag>
      </a-tooltip>
    </span>

    <!-- 验证规则 -->
    <span v-if="data.validation_rules" class="ml-1">
      <a-tooltip
        :title="`${data.validation_rules}`"
      >
        <a-tag color="red" >验证规则</a-tag>
      </a-tooltip>
    </span>

    <!-- 筛选规则 -->
    <span v-if="data.filter_rules" class="ml-1">
      <a-tooltip
        :title="`${data.filter_rules}`"
      >
        <a-tag color="blue" >筛选规则</a-tag>
      </a-tooltip>
    </span>
  </div>
</template>
<script>
import { mapConstants } from '@/libs/constants'
import {arrayWrap} from '@/libs/utils'
export default {
  name: 'ChildrenField',
  props: {
    data: Object,
    drag: {
      type: Boolean,
      default: true,
    }
  },
  methods: {
    arrayWrap,
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
  },
}
</script>

<style scoped lang="less">
@import "~@/styles/vars";
.drag {
  cursor: move;
}
</style>
